<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Alex Nolasco
http://www.mindovercode.com
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Demo 2</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="reset.css" type="text/css"/>
	<link rel="stylesheet" href="gradient.css" type="text/css" />	
	<link rel="stylesheet" href="theme.css" type="text/css" media="screen"/>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="../../src/gradient.color.picker.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
      // Loading...
			var posters = [[
          {image:'http://imagecache5.art.com/SML/11/1170/3KHU000Z.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10292955&S=2&Y=0', title:'50ft woman'},
					{image:'http://imagecache5.art.com/p/MED/27/2744/P2BTD00Z/j-howard-miller-we-can-do-it-rosie-the-riveter.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10290842&S=2&Y=0', title:'We Can Do It!'},
			    {image:'http://imagecache5.art.com/p/MED/15/1560/TFEDD00Z/timothy-sorsdahl-windswept-aspen.jpg', url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12182367&S=2&Y=0', title:'Windswept Aspen'},
			    {image:'http://imagecache5.art.com/p/MED/14/1455/VRPR000Z/diana-ong-yellow-rectangles.jpg', url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12013241&S=2&Y=0', title:'Yellow Rectangles'},
			    {image:'http://imagecache5.art.com/p/MED/26/2619/4KGMD00Z/-letter-for-me.jpg', url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=13718313&S=2&Y=0', title:'Letter For Me'}
				],[				
          {image:'http://imagecache5.art.com/p/MED/19/1905/UXC9D00Z/ken-bailey-pug-orange-juice.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12544174&S=2&Y=0', title:'Pug Orange Juice'},
          {image:'http://imagecache5.art.com/p/MED/21/2110/HA7ED00Z/-bliss.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12883077&S=2&Y=0', title:'Bliss'},
          {image:'http://imagecache5.art.com/p/MED/17/1704/4CM1D00Z/andy-warhol-everybody.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12313519&S=2&Y=0', title:'Everybody'},
          {image:'http://imagecache5.art.com/p/MED/16/1629/SGBGD00Z/alex-nolasco-horizons-xi.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12249969&S=2&Y=0', title:'Horizons XI'},
          {image:'http://imagecache5.art.com/p/MED/22/2244/214ZD00Z/darrell-gulin-tracks-in-field-of-coreopsis-wildflowers-near-brenham_-texas_-usa.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=13236283&S=2&Y=0', title:'Coreopsis'}
				],[				
          {image:'http://imagecache5.art.com/p/MED/8/857/7VQY000Z/robert-holman-la-sera-i.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10121926&S=2&Y=0', title:'La Sera I'},
          {image:'http://imagecache5.art.com/p/MED/22/2243/9Y6ZD00Z/dennis-flaherty-sunbeam-illuminates-sandy-floor-and-sandstone-walls-of-a-slot-canyon_-antelope-canyon_-page.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=13233347&S=2&Y=0', title:'Sunbeam Illuminates Sandy Floor'},
          {image:'http://imagecache5.art.com/p/MED/8/842/63WY000Z/michael-banks-flexi-grass_-bright-green-on-red.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10096287&S=2&Y=0', title:'Flexi Grass'},
          {image:'http://imagecache5.art.com/p/MED/26/2634/YXCMD00Z/marc-o-finley-four-chili-peppers-on-a-fork.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=13721767&S=2&Y=0', title:'Four Chili Peppers on a Fork'},
          {image:'http://imagecache5.art.com/p/MED/15/1558/GJ4DD00Z/ruth-palmer-2-luscious-red.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12179948&S=2&Y=0', title:'Luscious Red'}
				],[				
          {image:'http://imagecache5.art.com/p/MED/7/791/STCI000Z/jonathan-meader-soaring.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10042436&S=2&Y=0', title:'Soaring'},
          {image:'http://imagecache5.art.com/p/MED/16/1629/3GBGD00Z/alex-nolasco-horizons-ii.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12249946&S=2&Y=0', title:'Horizons'},
          {image:'http://imagecache5.art.com/p/MED/18/1847/A1G8D00Z/peter-cade-starfish.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12493968&S=2&Y=0', title:'Starfish'},
          {image:'http://imagecache5.art.com/p/MED/6/672/1TWC000Z/kerne-erickson-miami-beach.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10096052&S=2&Y=0', title:'Miami Beach'},
          {image:'http://imagecache5.art.com/p/MED/15/1525/8LJBD00Z/peter-wileman-violet-horizon.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12124364&S=2&Y=0', title:'Violet Horizon'}          
				],[				
          {image:'http://imagecache5.art.com/p/MED/8/884/MKXJ000Z/ansel-adams-nevada-fall_-rainbow_-yosemite-national-park_-1946.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10008168&S=2&Y=0', title:'Nevada Fall, Rainbow'},
          {image:'http://imagecache5.art.com/p/MED/15/1526/DQJBD00Z/monte-nagler-fences-and-trees_-empire_-mi.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12100586&S=2&Y=0', title:'Fences and Trees'},
          {image:'http://imagecache5.art.com/p/MED/9/953/NH8K000Z/jon-bertelli-curiosity.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10206227&S=2&Y=0', title:'Curiosity'},
          {image:'http://imagecache5.art.com/p/MED/7/776/S81I000Z/steven-n-meyers-dogwood-blossoms.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=10299072&S=2&Y=0', title:'Dogwood Blossoms'},
          {image:'http://imagecache5.art.com/p/MED/15/1544/KEBDD00Z/-the-beatles.jpg',url:'http://affiliates.art.com/get.art?T=15047763&A=399795&L=8&P=12185821&S=2&Y=0', title:'The Beatles'}
			]];
				
			$('#color1').gradientColorPicker( {
				showHexBox:false,
				bindOn:'click',
				cssPrefix: 'big_',
				gradient: {                
					count: 5,
					useSingleColors:false,
					fadeTo:'left',
					colors: ['FFFF00', '008000', 'FF0000', '0000FF',  '000000']
				}     
			}); 
			
			// wire up change in selection
			$('#color1').change(function(){				
        var index = 0;
        // since we are using single color selection
        if($(this).val()==='#FFFF00'){
          index = 0;
        } 
        else if($(this).val()==='#008000'){
          index = 1;
        } 
        else if($(this).val()==='#FF0000'){
          index = 2;
        }
        else if($(this).val()==='#0000FF'){
          index = 3;
        }
        else if($(this).val()==='#000000'){
          index = 4;
        }        
        
        $('#footer').css('border-top', '1px solid ' + $(this).val());
        $('#posters .poster-content > img').each(function(i,v){
         
            $(v).attr('src', posters[index][i].image);
            
            $(v).parent().children('p').each(function(ii,vv){             
                $(vv).html('<a href="' + posters[index][i].url  + '">'+ posters[index][i].title+ '</a>');
            });             
        });				
			});
			
			// show some random images
			$('#posters .poster-content > img').each(function(i,v){
          var color = Math.floor(Math.random() * posters.length );
          var poster = Math.floor(Math.random() * posters[color].length);                    
          $(v).attr('src', posters[color][poster].image);
          
          $(v).parent().children('p').each(function(ii,vv){
            //console.log(ii,vv);
            $(vv).html('<a href="' + posters[color][poster].url  + '">'+ posters[color][poster].title+ '</a>').hide().show('slow');
          });
			});
			//console.log(posters[1]);
		});
	</script>
</head>

<body>
  <div id="wrapper">
    <!-- start header -->
    <div id="header">
        <div id="header-panel">        
        </div>
        
        <div id="header-panel-content">
        	<div class="left"> 
                <h1>Demo 2</h1>            
                <p>Choose your color from the selection: </p>
                <form action="#" method="post">             
                      <input id="color1" type="text" name="color1" value="#333399"></input>             
                </form>	       
            </div>
            <div class="right">
            	<p>About</p>
                <p>Using custom style sheet, single color selection, up to 5 levels of gradient</p>
            </div>
        </div>
    </div>
    <!-- end header-->
    
    <!-- start page-->
    <div id="page">
      <div id="content">
      
          
            <div id="middle">
            </div>   
            <div id="posters">
                <div class="poster">
                   <div class="poster-content">
                     <img src="ajax-loader.gif"/>
                     <p>Loading...</p>
                   </div>
                </div>
                
                <div class="poster">
                   <div class="poster-content">
                     <img src="ajax-loader.gif"/>
                     <p>Loading...</p>
                   </div>
                </div>
                <div class="poster">
                   <div class="poster-content">
                     <img src="ajax-loader.gif"/>
                     <p>Loading...</p>
                   </div>
                </div>
                <div class="poster">
                   <div class="poster-content">
                     <img src="ajax-loader.gif"/>
                     <p>Loading...</p>
                   </div>
                </div>
                <div class="poster">
                   <div class="poster-content">
                     <img src="ajax-loader.gif"/>
                     <p>Loading...</p>
                   </div>
                </div>
            </div>            	
      </div> 
    </div>
  
    <!-- end page-->
  </div>
   <div id="footer">
      <div>
      <p>Images provided by art.com</p>
      <p>Color gradient picker demo2 by Alex Nolasco</p>
      </div>
   </div>  
</body>
</html>